<template>
   <div>
     <button v-for="item in BrowseTypes" :key="item.type" :class="getClass(item.type)" @click="SETBROWSETYPE(item.type)" >{{item.label}}</button>
   </div>
</template>
<script>
import {mapMutations, mapState} from 'vuex'
  export default 
  {
     name :'', 
     computed:{
        ...mapState('Personal',['BrowseType','PersonalData']),
     },
     data() {
        return {
             BrowseTypes:[
                {type:'viewed',label:'谁看过我'},
                {type:'view',label:'我看过谁'},
                {type:'reject',label:'被挡访客'}
            ]
        }
     },
     methods:{
        ...mapMutations('Personal',['SETBROWSETYPE']),
        
        getClass(type){
            return this.BrowseType==type ? 'NaviOne active' : 'NaviOne'
        }
     }
  }
</script>
<style scoped lang='less'>
 .NaviOne{
        padding: 5px 10px;
        border-radius: 10px;
        font-size: 20px;
   }
.active, .NaviOne:hover{
    background: var(--GeneralBackColor);
    color: white;
}
.browsecount{
    width: 100%;
}
</style>